简述vue登录鉴权的业务流程

2023-04-21 11:17| 来源: 网络整理| 查看: 265

登录鉴权

前端执行登录获得并保存token，在发送需要登录权限的请求时携带token。

整体流程：

如果用户未登录，当用户使用那些需要登录权限的功能时，跳转到登录页。登录成功后，用户再次使用那些需要鉴权的功能时，就不会被拦截了。另外，一般后端也会有鉴权，如果用户需要调用一些有权限的接口时，在请求拦截器中添加token传递给后端，后端就知道我的身份了。

将token保存在vuex中

vue项目刷新瞬间保存在WebStorage中，再从WebStorage获取并重新保存，避免登录状态被清除

按页面效果分为路由鉴权和功能鉴权

路由鉴权

思路：使用VueRouter的路由守卫和meta信息记录，路由守卫根据

// 路由 // meta中有是否需要鉴权的判断 const router = new VueRouter({ mode: 'hash', routes: [ { path: '/', component: Home },// 不需要鉴权 { path: '/good/detail/:id', component: Detail },// 商品详情不需要鉴权 { path: '/cart', component: Cart, meta:{ isAuth:true }}, // 购物车需要鉴权 { path: '/user', component: User, meta:{ isAuth:true } }, // 用户信息需要鉴权 { path: '/login', component: Login }, { path: '/regist', component: Regist } ] }) 复制代码 // 路由守卫 router.beforeEach((to,from,next)=>{ const { isAuth } = to.meta // 假设的一个登录标识 const token = store.state.user.token if (isAuth) { // 需要登录，才能过去 if (token) next() else router.push('/login') // else location.href = '#/login' } else { next() } }) 复制代码功能鉴权

比如商品详情中添加购物车的按钮，未登录时点击跳转到登录页。

思路：创建一个vue指令（directive）能生成一个元素覆盖再购物车按钮上：

Vue.directive('auth', function(el){ const token = store.state.user.token if (!token) { // 鉴权判断，建议使用用户信息，此处图个方便 el.style.position = 'relative' const oDiv = document.createElement('div') oDiv.style.position = 'absolute' oDiv.style.top = 0 oDiv.style.bottom = 0 oDiv.style.left = 0 oDiv.style.right = 0 oDiv.style.zIndex = 9999 oDiv.style.opacity = 0 oDiv.addEventListener('click', function(){ router.push('/login') }) el.appendChild(oDiv) } }) 复制代码加入购物车复制代码其他问题鉴权失败（或token失效）

后端验证token失败，返回的response中带有{ err: -1 }。

处理逻辑如下：

function errFunc(response){ if (response.data.err===-1) { // 验证token失败 vueStore.commit('user/updateToken', null) // 清空vue store localStorage.removeItem('token') // 清除localStorage中的token（如果有的话） vueRouter.replace('/login') // 跳转登录页 } } 复制代码

将方法放入axios拦截器中

axiosInstance.interceptors.request.use(errFunc) 复制代码刷新页面

在app.vue创建之时：

读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态在window.beforeunload事件方法中将store.state存储到sessionstorage中。 // app.vue export default { name: 'app', created () { // 在页面加载时读取sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) } // 在页面刷新时将store保存到sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) } } 复制代码最后

本文只是简述，更详细的还是得看花裤衩大佬的手摸手，带你用 vue 撸后台系列二(登录权限篇)

【本文地址】

简述vue登录鉴权的业务流程

简述vue登录鉴权的业务流程

今日新闻

推荐新闻